<template>
  <section class="common-pane">
    <a-tabs v-model:activeKey="activeKey" size="small" class="pane-tabs">
      <a-tab-pane key="1" tab="表单配置"></a-tab-pane>
      <a-tab-pane key="2" tab="通知配置"></a-tab-pane>
    </a-tabs>
    <ScrollContainer class="config-content">
      <a-form :colon="false" layout="vertical" :model="formConf" class="config-form" v-show="activeKey === '1'">
        <template v-if="integrateType == 1">
          <a-form-item>
            <template #label>触发表单</template>
            <FormListModal
              :value="formConf.formId"
              :title="formConf.formName"
              enableFlow="0"
              :allowClear="false"
              @change="onFormIdChange"
              placeholder="请选择表单" />
          </a-form-item>
          <a-form-item label="触发事件">
            <gentle-radio v-model:value="formConf.triggerEvent" :options="triggerEventOptions" />
          </a-form-item>
          <a-form-item>
            <template #label>触发条件<BasicHelp text="满足以下条件，触发执行动作。" /></template>
            <ConditionMain ref="conditionMainRef" />
          </a-form-item>
        </template>
        <template v-if="integrateType == 2">
          <a-form-item label="触发开始时间">
            <gentle-date-picker v-model:value="formConf.startTime" format="YYYY-MM-DD HH:mm:ss" placeholder="选择开始时间" />
          </a-form-item>
          <a-form-item label="触发规则">
            <a-form-item>
              <div class="ant-form-item-label"><label class="ant-form-item-no-colon">Cron表达式</label></div>
              <gentle-cron v-model:value="formConf.cron" />
            </a-form-item>
          </a-form-item>
          <a-form-item label="触发结束时间">
            <gentle-select v-model:value="formConf.endTimeType" :options="endTimeTypeOptions" />
            <a-input-number
              v-model:value="formConf.endLimit"
              placeholder="次数"
              :min="1"
              :precision="0"
              addonAfter="次后结束"
              class="mt-10px"
              @change="oneEndLimitChange"
              v-if="formConf.endTimeType === 1" />
            <gentle-date-picker
              v-model:value="formConf.endTime"
              format="YYYY-MM-DD HH:mm:ss"
              placeholder="选择结束时间"
              class="!mt-10px"
              v-if="formConf.endTimeType === 2" />
          </a-form-item>
        </template>
      </a-form>
      <div v-show="activeKey === '2'">
        <a-form :colon="false" :model="formConf" layout="vertical" class="config-form">
          <a-form-item label="通知人">
            <gentle-select v-model:value="formConf.msgUserType" :options="msgUserOptions" multiple />
          </a-form-item>
          <a-form-item v-if="formConf.msgUserType.includes(3)">
            <div class="ant-form-item-label"><label class="ant-form-item-no-colon">选择用户</label></div>
            <gentle-users-select v-model:value="formConf.msgUserIds" multiple />
          </a-form-item>
          <a-form-item>
            <template #label>执行失败<BasicHelp text="执行失败时发送通知！" /></template>
            <gentle-select v-model:value="formConf.failMsgConfig.on" :options="noticeOptions" />
          </a-form-item>
          <a-form-item v-if="formConf.failMsgConfig.on === 1">
            <div class="ant-form-item-label"><label class="ant-form-item-no-colon">发送配置</label></div>
            <msg-modal
              :value="formConf.failMsgConfig.msgId"
              :title="formConf.failMsgConfig.msgName"
              messageSource="3"
              @change="(val, data) => onMsgChange(keyMap.failMsgConfig, val, data)" />
          </a-form-item>
          <a-form-item>
            <template #label>开始执行<BasicHelp text="开始执行时发送通知！" /></template>
            <gentle-select v-model:value="formConf.startMsgConfig.on" :options="noticeOptions" />
          </a-form-item>
          <a-form-item v-if="formConf.startMsgConfig.on === 1">
            <div class="ant-form-item-label"><label class="ant-form-item-no-colon">发送配置</label></div>
            <msg-modal
              :value="formConf.startMsgConfig.msgId"
              :title="formConf.startMsgConfig.msgName"
              messageSource="3"
              @change="(val, data) => onMsgChange(keyMap.startMsgConfig, val, data)" />
          </a-form-item>
        </a-form>
      </div>
    </ScrollContainer>
  </section>
</template>
<script lang="ts" setup>
  import { reactive, toRefs, computed, ref, unref } from 'vue';
  import { ScrollContainer } from '/@/components/Container';
  import FormListModal from './FormListModal.vue';
  import MsgModal from '/@/components/FlowProcess/src/propPanel/MsgModal.vue';
  import { noticeOptions, msgUserOptions } from '../helper/define';
  import ConditionMain from '/@/components/ColumnDesign/src/components/ConditionMain.vue';

  interface State {
    activeKey: string;
  }

  defineOptions({ name: 'startNode', inheritAttrs: false });
  defineExpose({ initCondition, submitCondition });
  const props = defineProps(['formConf', 'integrateType', 'formFieldsOptions', 'getFormFieldList']);
  const conditionMainRef = ref();
  const triggerEventOptions = [
    { id: 1, fullName: '新增数据' },
    { id: 2, fullName: '修改数据' },
    { id: 3, fullName: '删除数据' },
  ];
  const endTimeTypeOptions = [
    { id: 1, fullName: '触发次数' },
    { id: 2, fullName: '指定时间' },
    { id: 3, fullName: '不结束' },
  ];
  const keyMap = {
    failMsgConfig: 'failMsgConfig',
    startMsgConfig: 'startMsgConfig',
  };
  const state = reactive<State>({
    activeKey: '1',
  });
  const { activeKey } = toRefs(state);

  const getRuleOptions = computed(() => props.formConf.formFieldList.filter(o => o.id.indexOf('-') < 0));

  function onFormIdChange(id, item) {
    if (!id) return handleNull();
    props.formConf.formName = item.fullName;
    props.formConf.formId = id;
    props.formConf.ruleList = [];
    props.getFormFieldList(id, 'start');
  }
  function handleNull() {
    props.formConf.formName = '';
    props.formConf.formId = '';
    props.formConf.formFieldList = [];
  }
  function onMsgChange(key, val, row) {
    if (!val) {
      props.formConf[key].msgId = '';
      props.formConf[key].msgName = '';
      props.formConf[key].templateJson = [];
      return;
    }
    if (props.formConf[key].msgId === val) return;
    props.formConf[key].msgId = val;
    props.formConf[key].msgName = row.fullName;
    props.formConf[key].templateJson = row.templateJson || [];
  }
  function initCondition() {
    if (props.integrateType != 1) return;
    conditionMainRef.value?.init({
      conditionList: props.formConf.ruleList || [],
      matchLogic: props.formConf.ruleMatchLogic,
      fieldOptions: unref(getRuleOptions),
    });
  }
  function submitCondition() {
    const values = conditionMainRef.value?.confirm();
    if (!values) return false;
    return values;
  }
  function oneEndLimitChange(val) {
    if (!val) props.formConf.endLimit = 1;
  }
</script>
